<template>
  <div class="container">
    <div class="container-top flex-box-align">
      <div class="top-name flex">{{type?'查看商品':'新增/编辑商品'}}</div>
      <div class="btns flex-box-align">
        <el-button type="primary" @click="back()">保存</el-button>
        <el-button type="primary" @click="back()">返回</el-button>
      </div>
    </div>
    <div class="main">
      <div class="title-desc">基本信息</div>
      <el-form
        :model="information"
        :rules="rules"
        ref="information"
        label-width="180px"
        class=""
      >
        <el-form-item
          label="商品名称:"
          prop="title"
        >
          <div v-if="type">{{information.title}}</div>
          <el-input
            v-if="!type"
            v-model="information.title "
            placeholder="请输入"
            maxLength="60"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="品牌:"
          prop="brandId"
        >
          <div v-if="type">{{information.title}}</div>
          <el-select
            v-model='information.brandId'
            placeholder='-请选择-'
          >
            <el-option
              v-for="item in brandList"
              :key="item.id"
              :label="item.brandName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="所属门店:"
          prop="storeId"
        >
          <div v-if="type">{{information.title}}</div>
          <el-button type="primary" size="mini" @click="dialogVisible = true">选择门店</el-button>
          <div v-if="'storeName' in selectedStore">{{selectedStore.storeName}}</div>
        </el-form-item>
        <el-form-item
          label="商品状态:"
          prop="status"
        >
          <el-radio v-model="information.status" label="SALE">立即上架</el-radio>
          <el-radio v-model="information.status" label="NOTSALE">放入仓库</el-radio>
        </el-form-item>
        <el-form-item
          label="选择商品分类:"
          prop="categoryThree"
        >
          <el-select
            filterable
            v-model='information.category'
            placeholder='-请选择一级分类-'
            @change="sortChangeOne"
          >
            <el-option
              v-for="item in c1List"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            ></el-option>
          </el-select>

          <el-select
            filterable
            v-model='information.categoryTow'
            placeholder='-请选择二级分类-'
            @change="sortChangeTwo"
          >
            <el-option
              v-for="item in c2List"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-select
            filterable
            v-model='information.categoryThree'
            placeholder='-请选择三级分类-'
          >
            <el-option
              v-for="item in c3List"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="title-desc">销售信息</div>
        <el-form-item
          label=""
          prop="modelList"
          class="category-item"
        >
          <el-input v-model="information.modelAttribute" placeholder="属性1" style="float: left;width: 100px;margin-right: 20px;"></el-input>
          <div
            class="category-list"
            v-for="(item,index) in cateArr"
            :key="index"
          >
            <i
              v-if="!type"
              @click="cateDelete(index)"
              class="el-icon-delete"
            ></i>
            <div v-if="type">{{item.name}}</div>
            <el-input
              v-model="item.name"
              placeholder="请输入"
              maxLength="5"
            ></el-input>
            <el-upload
              class="avatar-uploader"
              :http-request="myUpload"
              :action="upLoadUrl"
              :show-file-list="false"
              :before-upload="(file)=>{imageUpload(file,index)}"
            >
              <img
                v-if="item.fileUrl"
                @click="codeShow(item.fileUrl)"
                :src="item.fileUrl"
                class="avatar"
              >
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
              ></i>
            </el-upload>
          </div>
          <div class="category-list">
            <div @click="addCategory" class="add">
              <i class="el-icon-plus"></i>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          label=""
          class="mode-item"
        >
          <el-input v-model="information.modelAttributeSecond" placeholder="属性2" style="float: left;width: 100px;margin-right: 20px;"></el-input>
          <div
            v-for="(item,index) in sizeArr"
            class="mode-list"
            :key="index"
          >
            <i
              v-if="!type"
              @click="sizeDelete(index)"
              class="el-icon-delete"
            ></i>
            <el-input v-if="!type"
                      v-model="item.name "
                      placeholder="请输入"
                      maxLength="5"
            ></el-input>
            <div v-if="type">{{item.name}}</div>
          </div>
          <div
            @click="sizeAdd"
            class="mode-list"
          >
            <div class="add">
              <i class="el-icon-plus"></i>
            </div>
          </div>
        </el-form-item>
        <div class="table-cate">
          <div class="table-head">
            <div class="head-list">{{information.modelAttribute ? information.modelAttribute : '属性1'}}</div>
            <div class="head-list">{{information.modelAttributeSecond ? information.modelAttributeSecond : '属性2'}}</div>
            <div class="head-list">库存</div>
            <div class="head-list">预警库存</div>
            <div class="head-list">价格</div>
            <div class="head-list">折扣价</div>
            <div class="head-list">操作</div>
          </div>
          <div
            v-for="(item,index) in information.modelList"
            :key="index"
            class="table-item"
          >
            <div class="table-list">{{item.modelName}}</div>
            <div class="table-list">{{item.modelSize}}</div>
            <div class="table-list">
              <el-input v-if="!type"
                        v-model="item.modelStock"
                        placeholder="请输入"
                        :disabled="information.isDistribution=='y'"
              ></el-input>
              <div v-if="type">{{item.modelStock}}</div>
            </div>
            <div class="table-list">
              <el-input v-if="!type"
                        v-model="item.warningModelStock"
                        placeholder="请输入"
                        :disabled="information.isDistribution=='y'"
              ></el-input>
              <div v-if="type">{{item.warningModelStock}}</div>
            </div>
            <div class="table-list">
              <el-input v-if="!type"
                        v-model="item.modelSalePrice"
                        placeholder="请输入"
                        :disabled="information.isDistribution=='y'"
              ></el-input>
              <div v-if="type">{{item.modelSalePrice}}</div>
            </div>
            <div class="table-list">
              <el-input v-if="!type"
                        v-model="item.modelDiscountPrice"
                        placeholder="请输入"
                        :disabled="information.isDistribution=='y'"
              ></el-input>
              <div v-if="type">{{item.modelDiscountPrice}}</div>
            </div>
            <div class="table-list">
              <!--<el-button type="danger" size="mini" @click="handleDelModelItem(index)">删除</el-button>-->
              <div v-if="type">{{item.isDistribution == 'y'?'是':'否'}}</div>
            </div>
          </div>
          <div v-if="!information.modelList.length" class="no-data">暂无数据</div>
        </div>

        <el-form-item
          label="积分商品："
          prop="productType"
        >
          <div v-if="type">{{information.status == 'SALE'?'立即上架':'放入仓库'}}</div>
          <el-radio
            v-model="information.productType"
            label="POINT"
          >是</el-radio>
          <el-radio
            v-model="information.productType"
            label="GENERAL"
          >否（普通商品）</el-radio>
        </el-form-item>
        <el-form-item
          label="积分价格："
          prop="price"
          v-if="information.productType === 'POINT'"
        >
          <el-input
            v-model="information.price "
            placeholder="请输入"
            maxLength="60"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商品价格："
          prop="price"
          v-else
        >
          <el-input
            v-model="information.price"
            placeholder="请输入"
            maxLength="60"
          ></el-input>
        </el-form-item>
        <div class="title-desc">介绍信息</div>
        <el-form-item
          label="商品H5封面："
          prop="appExampleImage"
          class="image-item"
        >
          <el-upload
            :action="upLoadUrl"
            :show-file-list="false"
            class="avatar-uploader"
            :before-upload="beforeH5CoverUpload"
          >
            <img v-if="h5CoverUrl" :src="h5CoverUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div v-if="!type" class="up-tips">建议上传封面尺寸：500*400</div>
        </el-form-item>
        <el-form-item
          label="商品H5轮播图："
          prop="appImageFileKeyList"
        >
          <el-upload
            list-type="picture-card"
            class="avatar-uploader"
            :http-request="myUpload"
            :action='upLoadUrl'
            :limit='9'
            multiple
            :file-list='h5SwiperList'
            :on-remove="handleH5SwiperRemove"
            :before-upload="beforeH5SwiperUpload"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div class="up-tips">建议上传封面尺寸：800*800</div>
        </el-form-item>
        <el-form-item
          label="商品H5详情"
          prop="appDetail"
        >
          <bg-editor
            v-if="!type"
            :minHeight="300"
            :uploadUrl="upLoadUrl"
            :content="information.appDetail"
            @editorData='editorInfo'
          />
        </el-form-item>
        <el-form-item
          label="商品Web封面："
          prop="webExampleImage"
          class="image-item"
        >
          <el-upload
            :action="upLoadUrl"
            :show-file-list="false"
            class="avatar-uploader"
            :before-upload="beforeWebCoverUpload"
          >
            <img v-if="webCoverUrl" :src="webCoverUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="up-tips">建议上传封面尺寸：500*400</div>
        </el-form-item>
        <el-form-item
          label="商品Web轮播图："
          prop="webImageFileKeyList"
        >
          <el-upload
            list-type="picture-card"
            class="normal-uploader"
            :http-request="myUpload"
            :action='upLoadUrl'
            :limit='9'
            multiple
            :file-list='webSwiperList'
            :on-remove="handleWebSwiperRemove"
            :before-upload="beforeWebSwiperUpload"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div v-if="!type" class="up-tips">建议上传封面尺寸：800*800</div>
        </el-form-item>
        <el-form-item
          label="商品Web详情"
          prop="webDetail"
        >
          <bg-editor
            id="summernote1"
            :minHeight="300"
            :uploadUrl="upLoadUrl"
            :content="information.webDetail"
            @editorData='editorInfo1'
          />
        </el-form-item>

        <el-form-item>
          <el-button
            v-if="!type"
            type="primary"
            @click="submitForm('information')"
            :loading="loading"
          >保存</el-button>
          <el-button
            type="primary"
            @click="back"
          >返回</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
      title="查看图片"
      :visible.sync="codeState"
      width="40%">
      <img style="width:100%" :src="codeImg" alt="">
      <span slot="footer" class="dialog-footer">
            <el-button type="cancel" @click="codeState = false">关闭</el-button>
        </span>
    </el-dialog>

    <el-dialog title="选择商户" :visible.sync="dialogVisible">
      <div class="input_modal">
        <div class="modal-list">
          <div class="input-item">
            <span class="name">商户名称：</span>
            <el-input
              v-model="storeParams.storeNameLike"
              placeholder="请输入"
              class="proName"
              @keyup.enter.native="searchCity"
            />
          </div>
          <div class="input-item">
            <span class="name">商户类别：</span>
            <el-select v-model="storeParams.storeType" placeholder="请选择">
              <el-option label="全部" value="" />
              <el-option label="个体商户" value="INDIVIDUAL" />
              <el-option label="企业商户" value="ENTERPRISE" />
            </el-select>
          </div>
          <div class="input-item">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="getStoreList()">查询</el-button>
          </div>
        </div>
      </div>
      <el-table :data="gridData">
        <el-table-column property="storeName" label="商户名称(店铺名)" width="150"></el-table-column>
        <el-table-column storeType="name" label="类别" width="200">
          <template slot-scope="scope">
            <div>{{scope.row.storeType === 'INDIVIDUAL' ? '个体商户' : '企业商户'}}</div>
          </template>
        </el-table-column>
        <el-table-column property="address" label="店铺等级"></el-table-column>
        <el-table-column property="address" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" :type="selectedStore.id === scope.row.id ? 'danger' : 'primary'" @click="handleSelectShop(scope.row)">{{selectedStore.id === scope.row.id ? '取消' : '选择'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import $ from "jquery";
  export default {
    data() {
      return {
        codeState:false,
        codeImg:'',
        url: "broadcastEdit",
        id: "",
        isEdit: false,
        pageIndex: "1",
        upLoadUrl: "",
        information: {
          "appDetail": "",
          "appExampleImage": "",
          "appImageFileKeyList": [],
          "brandId": null,
          "category": null,
          "categoryThree": null,
          "categoryTow": null,
          "id": null,
          "modelAttribute": "",
          "modelAttributeSecond": "",
          "modelList": [],
          "price": null,
          "productType": "GENERAL",
          "salePrice": null,
          "status": "SALE",
          "storeId": null,
          "title": "",
          "webDetail": "",
          "webExampleImage": "",
          "webImageFileKeyList": [],
        },
        manageArr:[],
        cateArr: [],
        sizeArr: [],
        sortArr: [],
        sortArr1: [],
        imageList:[],
        sortArr2:[],
        rules: {
          status: [
            { required: true, message: "请选择商品状态", trigger: "blur" }
          ],
          appDetail: [
            { required: true, message: "请输入H5图文详情", trigger: "blur" }
          ],
          appExampleImage: [
            { required: true, message: "请上传H5封面图", trigger: "blur" }
          ],
          appImageFileKeyList: [
            { required: true, message: "请上传H5商品轮播图", trigger: "blur" }
          ],
          brandId: [
            { required: true, message: "请选择品牌", trigger: "blur" }
          ],
          category: [
            { required: true, message: "请选择一级分类", trigger: "blur" }
          ],
          categoryTow: [
            { required: true, message: "请选择二级分类", trigger: "blur" }
          ],
          categoryThree: [
            { required: true, message: "请选择三级分类", trigger: "blur" }
          ],
          modelAttribute: [
            { required: true, message: "请输入规格第一属性名称", trigger: "blur" }
          ],
          modelAttributeSecond: [
            { required: true, message: "请输入规格第二属性名称", trigger: "blur" }
          ],
          price: [
            { required: true, message: "请输入商品价格", trigger: "blur" }
          ],
          productType: [
            { required: true, message: "请选择商品类型", trigger: "blur" }
          ],
          salePrice: [
            { required: true, message: "请输入销售价", trigger: "blur" }
          ],
          modelList: [
            { required: true, message: "请输入规格", trigger: "blur" }
          ],
          storeId: [
            { required: true, message: "请选择门店", trigger: "blur" }
          ],
          title: [
            { required: true, message: "请输入商品标题", trigger: "blur" }
          ],
          webDetail: [
            { required: true, message: "请输入WEB图文详情", trigger: "blur" }
          ],
          webExampleImage: [
            { required: true, message: "请上传WEB封面图", trigger: "blur" }
          ],
          webImageFileKeyList: [
            { required: true, message: "请上传WEB商品轮播图", trigger: "blur" }
          ],
        },
        loading: false,
        categoryName: "",
        stockNums: "",
        eidtState: false,
        type:'',
        dialogVisible:false,
        gridData: [],
        pageIndex: 1,
        pageCount: null,
        storeParams: {
          storeNameLike: '',
          storeType: ''
        },
        selectedStore: {},
        brandList: [],
        c1List: [],
        c2List: [],
        c3List: [],
        h5CoverUrl: '',
        h5SwiperList: [],
        webCoverUrl: '',
        webSwiperList: []
      };
    },
    watch: {
      cateArr: {
        handler: function(newVal, oldVal) {
          this.modeMath();
        },
        deep: true
      },
      sizeArr: {
        handler: function(newVal, oldVal) {
          this.modeMath();
        },
        deep: true
      },
      "information.modelList": {
        handler: function(newVal, oldVal) {
          let num = 0;
          this.information.modelList.map(item => {
            if (item.modelStock) {
              num += Number(item.modelStock);
            }
          });
          this.stockNums = num;
        },
        deep: true
      }
    },
    mounted() {
      this.pageIndex = this.$route.query.pageIndex
        ? this.$route.query.pageIndex
        : "1";
      this.id = this.$route.query.id;
      this.getStoreList();
      this.getBrandList();
      this.getCategoryList({}, (res) => {
        this.c1List = res;
      })
      if (this.id) {
        this.getDetailById();
      }
    },
    methods: {
      handleSelectShop(item) {
        this.selectedStore = item
        this.information.storeId = item.id
      },
      async getStoreList() {
        const url = this.$api.storeList;
        const json = await this.$https.fetchPost(url, {
          pageSize: 10,
          pageIndex: this.pageIndex,
          ...this.params,
        });
        if (json.data.code === 200) {
          const data = json.data.data;
          this.gridData = data.bussData;
          this.pageCount = data.count;
        } else {
          this.$message({
            type: 'warning',
            message: json.data.data.errMsg
          })
        }
      },
      async getBrandList() {
        const url = this.$api.brandList;
        const json = await this.$https.fetchPost(url, {
          pageIndex: 1,
          pageSize: 10000,
        })
        if (json.data.code === 200) {
          const res = json.data.data;
          this.brandList = res.bussData;
        }
      },
      async getCategoryList(params = {}, callback) {
        const url = this.$api.categoryList;
        const json = await this.$https.fetchPost(url, {
          pageIndex: 1,
          pageSize: 1000,
          categoryLevel: 1,
          ...params
        })
        if (json.data.code === 200) {
          const res = json.data.data;
          callback && callback(res.bussData)
        }
      },
      sortChangeOne(e) {
        this.information.categoryTow = ''
        this.information.categoryThree = ''
        this.getCategoryList({
          firstParentId: e,
          parentId: e,
          categoryLevel: 2
        }, (res) => {
          this.c2List = res;
        })
      },
      sortChangeTwo(e) {
        this.information.categoryThree = ''
        this.getCategoryList({
          firstParentId: this.information.category,
          parentId: e,
          categoryLevel: 3
        }, (res) => {
          this.c3List = res;
        })
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getStoreList();
      },
      handleCurrentChange(val) {
        this.pageIndex = val;
        this.getStoreList();
      },
      handleDelModelItem(index) {
        this.information.modelList.splice(index, 1);
      },
      //上传h5封面图
      async beforeH5CoverUpload(file) {
        const url = this.$api.adminUpload;
        const json = await this.$https.fetchGet(url + file.name.split(".")[1], {
          contentType: file.type
        })
        if (json.data.code === 200) {
          const data = json.data.data.bussData
          const upload = await this.$https.uploadFile(data.uploadUrl, file)
          if (upload) {
            this.h5CoverUrl = data.downloadUrl;
            this.information.appExampleImage = data.fileKey;
          }
        }
      },
      //上传h5轮播图
      async beforeH5SwiperUpload(file) {
        const url = this.$api.adminUpload;
        const json = await this.$https.fetchGet(url + file.name.split(".")[1], {
          contentType: file.type
        })
        if (json.data.code === 200) {
          const data = json.data.data.bussData
          const upload = await this.$https.uploadFile(data.uploadUrl, file)
          if (upload) {
            this.h5SwiperList.push({
              url: data.downloadUrl,
              key: data.fileKey
            });
          }
        }
      },
      //上传WEB封面图
      async beforeWebCoverUpload(file) {
        const url = this.$api.adminUpload;
        const json = await this.$https.fetchGet(url + file.name.split(".")[1], {
          contentType: file.type
        })
        if (json.data.code === 200) {
          const data = json.data.data.bussData
          const upload = await this.$https.uploadFile(data.uploadUrl, file)
          if (upload) {
            this.webCoverUrl = data.downloadUrl;
            this.information.webExampleImage = data.fileKey;
          }
        }
      },
      //上传WEB轮播图
      async beforeWebSwiperUpload(file) {
        const url = this.$api.adminUpload;
        const json = await this.$https.fetchGet(url + file.name.split(".")[1], {
          contentType: file.type
        })
        if (json.data.code === 200) {
          const data = json.data.data.bussData
          const upload = await this.$https.uploadFile(data.uploadUrl, file)
          if (upload) {
            this.webSwiperList.push({
              url: data.downloadUrl,
              key: data.fileKey
            });
          }
        }
      },
      handleH5SwiperRemove(e, imageList) {
        this.h5SwiperList = imageList;
      },
      handleWebSwiperRemove(e, imageList) {
        this.webSwiperList = imageList;
      },
      codeShow(pic){
        if(!this.type) return
        this.codeState = true
        this.codeImg = pic
      },
      handleImageRemove(e) {
        this.imageList.forEach((item, index) => {
          if (item.fileKey == e.fileKey) {
            this.imageList.splice(index, 1);
          }
        });
      },
      cateDelete(index) {
        this.cateArr.splice(index, 1);
      },
      sizeDelete(index) {
        this.sizeArr.splice(index, 1);
      },
      priceBtn() {
        this.information.modelList.forEach(item => {
          item.modelLinePrice = this.information.linePrice;
          item.modelSalePrice = this.information.salePrice;
        });
      },
      modeMath() {
        const { modelAttribute, modelAttributeSecond } = this.information;
        if (this.cateArr.length && this.sizeArr.length) {
          let arr = [],
            num = 0;
          this.cateArr.map((item, index) => {
            this.sizeArr.map(list => {
              arr.push({
                modelDiscountPrice: "",
                modelImageFileKey: item.fileKey,
                modelName: item.name, //index === 0 ? modelAttribute : modelAttributeSecond
                modelSalePrice: "",
                modelSize: list.name,
                warningModelStock: "",
                productCode: "",
                modelStock: '',
                id: ''
              });
            });
          });
          this.information.modelList.map(list=>{
            arr.forEach(item=>{
              if(
                item.modelName == list.modelName
                &&item.modelSize == list.modelSize){
                item.modelCode = list.modelCode
                item.modelDiscountPrice = list.modelDiscountPrice
                item.modelSalePrice = list.modelSalePrice
                item.modelStock = list.modelStock
                item.productCode = list.productCode
                item.warningModelStock = list.warningModelStock
                item.id = list.id,
                  item.costPrice = list.costPrice
              }
            })
          })
          this.information.modelList = arr;
          console.log(arr)
        }
      },
      sizeAdd() {
        if(this.information.isDistribution=='y'){
          return false;
        }
        this.sizeArr.push({
          name: ""
        });
      },
      addCategory() {
        if(this.information.isDistribution=='y'){
          return false;
        }
        this.cateArr.push({
          name: "",
          fileUrl:this.imageUrl1||'',
          fileKey: this.information.exampleImageFileKey||''
        });
      },
      handleClick(e) {
        this.$router.push(`/${e.name}`);
      },
      getDetailById: async function() {
        const url = this.$api.goodDetail
        const json = await this.$https.fetchGet(url + this.id)
        if (json.data.code == 200) {
          let data = json.data.data.bussData
          this.information = {
            ...this.information,
            ...data
          }
          this.h5CoverUrl = data.appExampleImageUrl;
          data.appImageUrls.map( item => {
            this.h5SwiperList.push({
              url: item.fileUrl,
              key: item.fileKey
            })
          })
          this.webCoverUrl = data.webExampleImageUrl;
          data.webImageUrls.map( item => {
            this.webSwiperList.push({
              url: item.fileUrl,
              key: item.fileKey
            });
          })
          this.getCategoryList({
            firstParentId: data.category,
            parentId: data.category,
            categoryLevel: 2
          }, (res) => {
            this.c2List = res;
          })
          this.getCategoryList({
            firstParentId: data.category,
            parentId: data.categoryTow,
            categoryLevel: 3
          }, (res) => {
            this.c3List = res;
          })
          this.selectedStore = {
            storeName: data.storeName,
            id: data.storeId
          }
          data.sizeList.forEach(item => {
            this.sizeArr.push({
              name: item
            });
          });
          data.colorList.forEach(item => {
            const findIndex = data.modelList.findIndex( modelItem => {
              return modelItem.modelImageFileKey === item.modelImageFileKey;
            })
            this.cateArr.push({
              name: item.modelName,
              fileUrl: item.modelImageUrl,
              fileKey: data.modelList[findIndex].modelImageFileKey
            });
          });
          delete this.information.colorList;
          delete this.information.sizeList;

          setTimeout(() => {
            this.eidtState = false;
          }, 0);
          console.log(this.cateArr)
        }
      },
      editorInfo(val) {
        this.information.appDetail = val;
      },
      editorInfo1(val) {
        this.information.webDetail = val;
      },
      back() {
        this.$router.push({
          path: "/goodList",
          query: { pageIndex: this.pageIndex }
        });
      },
      getList: function() {
        let url = CONSTANT.URL.LIST.SORTBYPAGE;
        let data = {
          pageIndex: 1,
          pageSize: 100000,
          levelCount:1
        };
      },
      submitForm(formName) {
        this.information.appImageFileKeyList = []
        this.information.webImageFileKeyList = []
        if(this.h5SwiperList&&this.h5SwiperList.length){
          this.h5SwiperList.map(item=>{
            this.information.appImageFileKeyList.push({
              fileKey: item.key,
              fileUrl: item.url
            })
          })
        }
        if(this.webSwiperList&&this.webSwiperList.length){
          this.webSwiperList.map(item=>{
            this.information.webImageFileKeyList.push({
              fileKey: item.key,
              fileUrl: item.url
            })
          })
        }
        this.$refs[formName].validate(async valid => {
          if (valid) {
            this.loading = true;
            const url = this.$api.goodEdit;
            const json = await this.$https.fetchPost(url, this.information);
            if (json.data.code == 200) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.loading = false;
              this.$router.replace({
                path: "/goodList",
                query: { pageIndex: this.pageIndex }
              });
            } else {
              this.$message({
                type: "error",
                message: json.data.data.errMsg
              });
              this.loading = false;
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      linkToList() {
        this.$router.push("/goodList");
      },
      back() {
        this.$router.push({
          path: "/goodList",
          query: { pageIndex: this.pageIndex }
        });
      },
      myUpload(content) {}, // 重写覆盖上传方法
      async imageUpload(file, index) {
        const url = this.$api.adminUpload;
        const json = await this.$https.fetchGet(url + file.name.split(".")[1], {
          contentType: file.type
        });
        if (json.data.code === 200) {
          const data = json.data.data.bussData
          const upload = await this.$https.uploadFile(data.uploadUrl, file)
          this.cateArr[index].fileKey = data.fileKey;
          this.cateArr[index].fileUrl = data.downloadUrl;
        }
      },
      imgLeft(obj,index){
        var arr = this.imageList
        if(index == 0){
          arr.splice(index,1)
          arr.push(obj)
        }else{
          arr.splice(index,1)
          arr.splice(index-1, 0, obj)
        }
      },
      imgright(obj,index){
        var arr = this.imageList
        if(index == arr.length-1){
          arr.splice(index,1)
          arr.unshift(obj)
        }else{
          arr.splice(index,1)
          arr.splice(index+1, 0, obj)
        }
      }
    }
  };
</script>
<style lang="scss">
  .category-item {
    overflow-x: hidden;
    .name {
      float: left;
    }
  }
  .arrow-wrap{
    position: relative;
    // top: -10px;
    overflow: hidden;
    .arrow-title{
      position: absolute;
      left: -20px;
      font-size: 14px;
      color: #606266;
    }
    .arrow-item{
      position: relative;
      float: left;
      width: 148px;
      margin-right: 8px;
      justify-content: space-between;
      text-align: center;
      .el-icon-arrow-left{
        position: absolute;
        left: 10px;
        top: 10px;
      }
      .el-icon-arrow-right{
        position: absolute;
        right: 10px;
        top: 10px;
      }
      i{
        font-size: 20px;
        cursor: pointer;
      }
    }
  }
  .price-item {
    overflow: hidden;
    font-size: 14px;
    color: #606266;
    margin-bottom: 20px;
    padding-left: 120px;
    .price-list {
      float: left;
      margin-right: 20px;
      .el-input {
        width: 120px !important;
        input {
          width: 120px !important;
        }
      }
    }
  }
  .table-cate {
    font-size: 14px;
    color: #606266;
    width: 70%;
    margin-left: 8%;
    margin-bottom: 30px;
    .table-head {
      overflow: hidden;
      display: flex;
      background-color: #d1d1d1;
      color: #333;
      .head-list {
        flex: 1;
        float: left;
        text-align: center;
        height: 40px;
        line-height: 40px;
      }
    }
    .no-data{
      border: 1px solid #e1e1e1;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
    .table-item {
      overflow: hidden;
      display: flex;
      background-color: #fff;
      color: #333;
      border: 1px solid #e1e1e1;
      .table-list {
        flex: 1;
        float: left;
        text-align: center;
        height: 50px;
        line-height: 50px;
        border-right: 1px solid #e1e1e1;
        .el-input {
          float: left;
          width: 90% !important;
          margin-left: 5%;
          input {
            width: 100% !important;
          }
        }
        &:last-child {
          border-right: 0;
        }
      }
    }
  }
  .mode-item {
    .mode-list {
      width: 85px;
      text-align: center;
      position: relative;
      float: left;
      margin-right: 20px;
      .el-icon-delete {
        cursor: pointer;
        position: absolute;
        right: 35px;
        bottom: 0px;
        z-index: 100;
      }
      .el-input {
        float: left;
        width: 80px !important;
        margin-bottom: 20px;
        input {
          width: 80px !important;
        }
      }
      .add {
        font-size: 26px;
        color: #409eff;
        cursor: pointer;
      }
    }
  }
  .category-list {
    position: relative;
    float: left;
    min-height: 170px;
    margin-right: 20px;
    width: 85px;
    text-align: center;
    .el-icon-delete {
      cursor: pointer;
      position: absolute;
      right: 40px;
      bottom: 10px;
      z-index: 100;
    }
    .add {
      font-size: 26px;
      color: #409eff;
      cursor: pointer;
    }
    .el-input {
      float: left;
      width: 80px !important;
      margin-bottom: 20px;
      input {
        width: 80px !important;
      }
    }
    .avatar-uploader,
    .avatar-uploader-icon,
    .avatar {
      width: 80px !important;
      height: 80px !important;
      line-height: 80px !important;
    }
  }
</style>
